<template>
  <a-card title="设备运行状态预测页面">
    <a-table :columns="columns" :dataSource="deviceData" rowKey="deviceId" bordered>
      <template #bodyCell="{ column, text, record }">
        <span v-if="column.dataIndex === 'status'">
          <a-radio-group v-model="selectedDevice">
            <a-radio :value="record.deviceId">{{ text }}</a-radio>
          </a-radio-group>
        </span>
      </template>
    </a-table>
  </a-card>

  <div style="display: flex; justify-content: space-between; margin-top: 20px">
    <a-card title="故障频率直方图（历史）" style="flex: 1; margin-right: 10px">
      <div style="margin-top: 20px">
        <a-range-picker v-model="dateRange" style="margin-right: 10px" />
        <a-button @click="queryData">查询</a-button>
      </div>
      <div ref="historicalChart" style="width: 100%; height: 400px"></div>
    </a-card>

    <a-card title="故障频率直方图（预测）" style="flex: 1">
      <div>
        <a-button @click="setForecast('7days')" style="margin-right: 10px">未来7天</a-button>
        <a-button @click="setForecast('1month')" style="margin-right: 10px">未来1个月</a-button>
        <a-button @click="setForecast('6months')">未来半年</a-button>
      </div>
      <div ref="predictedChart" style="width: 100%; height: 400px; margin-top: 20px"></div>
    </a-card>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import * as echarts from 'echarts';

  // 设备数据
  const deviceData = ref([
    { deviceName: '设备A', deviceId: 'DA123', voltage: '220V', current: '10A', temperature: '50°C', power: '5kW', status: '正常' },
    { deviceName: '设备B', deviceId: 'DA456', voltage: '110V', current: '15A', temperature: '60°C', power: '3kW', status: '需维护' },
    { deviceName: '设备C', deviceId: 'DA789', voltage: '380V', current: '8A', temperature: '40°C', power: '6kW', status: '正常' },
    { deviceName: '设备D', deviceId: 'DA321', voltage: '220V', current: '12A', temperature: '70°C', power: '7kW', status: '高风险' },
    { deviceName: '设备E', deviceId: 'DA654', voltage: '220V', current: '9A', temperature: '45°C', power: '4kW', status: '正常' },
  ]);

  // 列配置
  const columns = [
    { title: '单选框', dataIndex: 'status', key: 'status' },
    { title: '设备名称', dataIndex: 'deviceName', key: 'deviceName' },
    { title: '设备编号', dataIndex: 'deviceId', key: 'deviceId' },
    { title: '电压', dataIndex: 'voltage', key: 'voltage' },
    { title: '电流', dataIndex: 'current', key: 'current' },
    { title: '温度', dataIndex: 'temperature', key: 'temperature' },
    { title: '功率', dataIndex: 'power', key: 'power' },
  ];

  // 状态管理
  const selectedDevice = ref(null);
  const dateRange = ref([]);

  // 查询数据
  const queryData = () => {
    console.log('查询数据', dateRange.value);
  };

  // 设置预测时间范围
  const setForecast = (range) => {
    console.log('选择预测范围:', range);
    // 根据选定的范围更新预测图表数据
    updatePredictedChart(range);
  };

  // ECharts图表
  const historicalChart = ref(null);
  const predictedChart = ref(null);

  const updateHistoricalChart = () => {
    const chart = echarts.init(historicalChart.value);
    const option = {
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['设备A', '设备B', '设备C', '设备D', '设备E'],
      },
      yAxis: { type: 'value' },
      series: [
        {
          name: '故障频率',
          type: 'bar',
          data: [5, 3, 4, 2, 1],
        },
      ],
    };
    chart.setOption(option);
  };

  const updatePredictedChart = (range) => {
    const chart = echarts.init(predictedChart.value);
    const option = {
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['未来7天', '未来1个月', '未来半年'],
      },
      yAxis: { type: 'value' },
      series: [
        {
          name: '预测故障频率',
          type: 'bar',
          data: range === '7days' ? [2, 4, 5] : range === '1month' ? [3, 6, 4] : [4, 5, 7],
        },
      ],
    };
    chart.setOption(option);
  };

  // 生命周期钩子
  onMounted(() => {
    updateHistoricalChart();
    updatePredictedChart('7days'); // 默认显示未来7天的数据
  });
</script>

<style scoped>
  /* 这里可以添加自定义样式 */
</style>
